<template>
	<div class="background">
		<div class="findPwd-frame">
			<el-card class="box-card">
				<div slot="header" class="clearfix"><span id="logo">找回密码</span></div>
				<div class="text item">
					<el-form ref="form" :model="request.data" v-loading="loading">
						<el-form-item>
							<el-input v-model="request.data.email" autocomplete="off" placeholder="邮箱" style="width: 210px;"></el-input>
							<el-button type="primary" @click="sendEmail">发送邮件</el-button>
						</el-form-item>
						<el-form-item><el-input id="code" v-model="request.data.code" autocomplete="off" :disabled="isDisabled" placeholder="验证码"></el-input></el-form-item>
						<el-form-item>
							<el-input id="newPwd" v-model="request.data.newPwd" show-password :disabled="isDisabled" autocomplete="off" placeholder="新密码"></el-input>
						</el-form-item>
						<el-form-item><el-button type="primary" :disabled="isDisabled" @click="findPwd">修改密码</el-button></el-form-item>
						<el-link type="primary" @click="toLogin">返回登录</el-link>
					</el-form>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import caches from 'util/caches.js';
import utils from 'util/utils.js';
import api from 'api/index.js';

export default {
	name: 'findPwd',
	data() {
		return {
			request: utils.newRequest(),
			loading: false,
			isDisabled: true
		};
	},
	methods: {
		toLogin() {
			this.$router.replace('/login');
		},
		sendEmail() {
			this.loading = true;
			api.sendEmail(
				this.request,
				response => {
					this.isDisabled = false;
					utils.msg.success(response.msg);
					this.loading = false;
				},
				response => {
					utils.msg.warning(response.msg);
					this.loading = false;
				}
			);
		},
		findPwd() {
			this.loading = true;
			api.findPwd(
				this.request,
				response => {
					utils.msg.success(response.msg, 3000, () => {
						this.loading = false;
						this.$router.replace('/login');
					});
				},
				response => {
					utils.msg.warning(response.msg);
					this.loading = false;
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
@import '~common/custom/css/common.scss';
@import '~common/custom/css/findPwd.scss';
</style>
